{include file="header/index" /}
<meta charset="UTF-8">
<style>
	.form-control {
		height: 33px;
	}
</style>

<body>
	<div class="container  privilegeUserList pb40">
		<h2 class="list-title">菜单列表</h2>
		<div class="addUser">
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-3">
					<a href="#" onclick="menuopen()" class="btn btn-default addUser-btn">添加菜单</a>
				</div>
				<!-- /.col-lg-6 -->
			</div>
			<!-- /.row -->
		</div>

		<div class="table-responsive mt40">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>ID</th>
						<th>权限名称</th>
						<th>节点</th>
						<th>菜单状态</th>
						<th>添加时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					{foreach $admin_rule as $v}
					<tr>
						<td>{$v.id}</td>
						<td style='text-align:left;padding-left:{if condition="$v.leftpin neq 0"}{$v.leftpin}px{/if}'>{$v.lefthtml}{$v.title}</td>
						<td>{$v.url}</td>
						<td>
							{if condition="$v['status'] eq 1"}
							<div id="zt8" onclick="role_state(this,{$v.id})"><span class="label label-info">开启</span></div>
							{else /}
							<div id="zt8" onclick="role_state(this,{$v.id})"><span class="label label-danger">关闭</span></div>
							{/if}

						</td>
						<td>{:date('Y-m-d H:i:s',$v.add_time)}</td>
						<td>
							<a href="{:url('Menu/ModifyTheSort',array('id'=>$v['id']))}" class="btn btn-primary btn-xs"> <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
							<a href="javascript:;" onclick="roleDel(this,{$v.id})" class="btn btn-danger btn-xs"> <i class="fa fa-trash-o"></i> 删除</a>
						</td>
					</tr>
					{/foreach}
				</tbody>
			</table>
		</div>
		<p class="fr">第1页,共1页</p>
	</div>

	<div class="modal  fade in layui-layer layui-layer-page layui-layer-demo layer-anim addmenu">
		<div class="modal-dialog ">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" onclick="menuClose()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
					<h3 class="modal-title">添加菜单</h3>
				</div>
				<form class="form-horizontal" name="add_rule" id="add_rule" method="post" action="">
					<div class="ibox-content">
						<div class="form-group">
							<label class="col-sm-3 control-label">所属父级</label>
							<div class="col-sm-8">
								<select name="pid" class="form-control">
									<option value="0">--默认顶级--</option>
									{foreach $admin_rule as $v}
									<option value="{$v.id}" style="margin-left:55px;"> {$v.lefthtml}{$v.title}</option>
									{/foreach}

								</select>
							</div>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">菜单名称</label>
							<div class="col-sm-8">
								<input type="text" name="title" id="title" placeholder="输入菜单名称" class="form-control">
							</div>
						</div>

						<div class="hr-line-dashed"></div>
						<div class="form-group" id="style_display">
							<label class="col-sm-3 control-label">CSS样式</label>
							<div class="col-sm-8">
								<input type="text" name="css" id="css" placeholder="输入CSS样式" class="form-control">
								<a class="fl mt5 mr10 col-127" href="http://fontawesome.dashgame.com/" target="_blank">选择图标</a><span class="help-block m-b-none fl">如：如fa fa-user</span>
							</div>
						</div>

						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">节点</label>
							<div class="col-sm-8">
								<input type="text" name="url" id="url" placeholder="模块/控制器/方法" class="form-control">
								<span class="help-block m-b-none">如：administrative/user/index (一级节点添加“#”即可)</span>
							</div>
						</div>

						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">排&nbsp;序</label>
							<div class="col-sm-8">
								<input type="text" name="sort" id="sort" value="50" placeholder="输入排序" class="form-control">
							</div>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">状&nbsp;态</label>
							<div class="col-sm-6">
								<div class="switchery-radio" style="padding-top: 8px;">
									<input type="checkbox" name="status" value="1" class="js-switch" checked> 默认开启
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="addMenu();"><i class="fa fa-save"></i> 保存</button>
						<button type="button" class="btn btn-danger" onclick="menuClose()"><i class="fa fa-close"></i> 关闭</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
		//删除
		function roleDel(obj, id) {
			top.layer.alert('确认删除此条记录吗?', {
				btn: ['确认', '取消'], //按钮

			}, function() {
				$.post("{:url('Menu/delMenu')}", {
					id: id
				}, function(e) {
					if(e.code == '1') {
						top.layer.open({
							content: e.msg,
							time: 2000
						});
						$(obj).parents("tr").remove()
					} else {
						top.layer.open({
							content: e.msg,
							time: 2000
						});
					}
				}, 'json');
			});
		}



		//状态开启关闭
		function role_state(obj, id) {
			$.post("{:url('Menu/edit')}", {
				id: id
			}, function(e) {
				if(e.code == '1') {
					top.layer.msg(e.msg, {
						icon: 1,
						time: 2000
					});
					if($(obj).find("span").hasClass("label-info")) {
						$(obj).find("span").addClass("label-danger")
						$(obj).find("span").removeClass("label-info");
						$(obj).find("span").text("关闭");
					} else {

						$(obj).find("span").removeClass("label-danger")
						$(obj).find("span").addClass("label-info");
						$(obj).find("span").text("开启")

					}
				}
			}, 'json')

		}

		/**
		 * 修改排序
		 */
		function ModifyTheSort(obj, id) {
			var sort = $(obj).val();
			var id = id;
			$.post("{:url('Menu/ModifyTheSort')}", {
				sort: sort,
				id: id
			}, function(e) {

			}, 'json');
		}

		/**
		 * 添加菜单栏
		 */

		function addMenu() {
			var sendData = {};
			var data = $("#add_rule").serialize(); //序列化表单

			data.split('&').forEach(function(param) {
				param = param.split('=');
				sendData[param[0]] = decodeURI(param[1]);
			})
			if($("#title").val() == '') {
				top.layer.msg('菜单名不能为空', {
					icon: 2,
					time: 2000
				});
				return false;
			}

			if($("#url").val() == '') {
				top.layer.msg('节点不能为空', {
					icon: 2,
					time: 2000
				});
				return false;
			}
			$.post("{:url('Menu/addMenu')}", {
				sendData
			}, function(e) {
				if(e.code == '1') {
					top.layer.msg(e.msg, {
						icon: 1,
						time: 2000
					}, function() {
						window.location.href = e.data;
					});
				} else {
					top.layer.msg(e.msg, {
						icon: 2,
						time: 2000
					});
				}
			}, 'json')
		}

		/*
		$("#add_rule").submit(function(){
			if($("#title").val() == ''){
				layer.msg('菜单名不能为空', {icon: 2,time: 2000});
				return false;
			}

			if($("#url").val() == ''){
				layer.msg('节点不能为空', {icon: 2,time: 2000});
				return false;
			}

		}) */

		//开启添加菜单
		function menuopen() {
			$(".addmenu").show()
		}
		//关闭添加菜单
		function menuClose() {
			$(".addmenu").hide()
		}
	</script>
</body>

</html>